<template>
    <div>

        <div class="accounthead">
                <img src="../../assets/jia.png" alt="">
                <span>新建任务</span>
        </div>

       <div class="bigbox">

           <div class="newbody">
               <div class="newbodyhead"><span>2.定义搜索内容</span></div>
            </div>

           <div class="company">
               <div class="company1">
                    <span>公司名称</span>
                    <div>
                        <input type="text" class="companyname" placeholder="请输入公司全称" v-model="companyName">
                    </div> 
               </div>

               <div class="company2">
                    <span>行业属性</span>
                    <div>
                        <!-- 选择器 -->
                        <!-- <el-select v-model="value" placeholder="请选择">
                            <el-option
                            v-for="item in options"
                            :key="item.value"
                            :label="item.name"
                            :value="item.name">
                            </el-option>
                        </el-select> -->
                        <input type="text" class="companyname" placeholder="请输入行业属性" v-model="value">
                    </div> 
               </div>
               
            </div>
           

            <div class="subject">
               <div class="subjecttitle">
                  <span>主体</span>
                  <span class="subjecttitle2">请输入主体（一行一个）</span>
               </div>
               <textarea v-model="subjectText"></textarea>
            </div>

            <div class="moduleSel">
                <el-collapse accordion>

                     <!-- @click="changeselect(index)" item.openvalue  @click="changeSwitch(index,item.openvalue)" v-model="'open'+index" --> 
                   <el-collapse-item   v-for="(item, index) in moduleList" :key="index">
                        <template slot="title">
                            {{item.name}}
                            <div class="selRight" v-on:click.stop = "">
                                <el-switch
                                v-model="item.open"
                                active-color="#5776f7"
                                inactive-color="#ccc">
                                </el-switch>
                            </div>
                        </template>
                        

                         <div class="keyword keywordTop" v-for="(items, indexs) in item.templates" :key="indexs">
                            <div class="keywordhead">
                                <span class="keyfont">关键词</span>
                                <!-- SelectFormVisible = true -->
                                <span class="right" @click="selectOther(item.id, index, indexs)" >选择其他模板</span>
                            </div>

                            <div class="keywordbody">
                                <div class="keywordbodyT">
                                    <span>{{items.name}}</span>
                                    <!-- <span class="key15">默认模板</span> -->
                                    <span @click.stop="">
                                        <!-- <img src="../../assets/pen.png" class="penico" @click="selectKeyword(items.id)"  alt=""> -->
                                         <svg version="1.1" class="penSvg penico" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
                                            viewBox="0 0 20 20" style="enable-background:new 0 0 20 20;" xml:space="preserve" @click="selectKeyword(items.id)">>
                                        <rect x="-354.3" y="-271.1" class="st0" width="20" height="20"/>
                                        <polygon class="st1" points="1.7,18.5 2.5,14.8 5.3,17.6 "/>
                                        <g>
                                            <path class="st1" d="M18.5,4.3l1-1c0.2-0.2,0.2-0.5,0-0.7l-2.1-2.1c-0.2-0.2-0.5-0.2-0.7,0l-1,1L18.5,4.3z"/>
                                            <rect x="1.7" y="7.6" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -3.6929 10.2382)" class="st1" width="17.7" height="3.9"/>
                                        </g>
                                        </svg>
                                        </span>
                                </div>
                                <div class="keywordbodyB">
                                    <span>更新于{{items.updateTime}}</span>
                                </div>
                            </div>
                        </div>
                    </el-collapse-item>


                    </el-collapse>

                    <div class="foot">
                        <div class="footBtn">
                            <el-button @click="goback">返回</el-button>
                            <el-button type="primary" @click="addNegativebtn">确认</el-button>
                        </div>
                    </div>
            </div>

        </div>


               <!-- 这是选择关键词模板的代码 -->
      <el-dialog title="选择关键词模板" :visible.sync="SelectFormVisible">
         <el-form>
           <div class="searchbox">
                <el-input placeholder="请输入模块名称" v-model="searchcon" class="input-with-select searchInput" @keyup.native.enter="searchBtn">
                    <el-button slot="append" icon="el-icon-search" class="searchBtn"  @click="searchBtn"></el-button>
                </el-input>
            </div>
         </el-form>

          <div class="keyword keywordTop" v-for="(item, index) in allTemplates" :key="index" @click="replaceTemplate(item.id)">
              <div class="keywordbody">
                  <div class="keywordbodyT">
                      <span>{{item.name}}</span>
                      <!-- {{item.name}} -->
                       <!-- @change="changeRadio(item.id)" -->
                      <span class="key15"  @click.stop=""> <el-radio v-model="morenradio" :label="index" @change="changeRadio(item.id)" >默认模板</el-radio></span>
                      <span @click.stop="">
                          <!-- <img src="../../assets/pen.png" class="penico" @click="selectKeyword(item.id)" alt=""> -->
                           <svg version="1.1" class="penSvg penico" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
                                viewBox="0 0 20 20" style="enable-background:new 0 0 20 20;" xml:space="preserve" @click="selectKeyword(item.id)">>
                            <rect x="-354.3" y="-271.1" class="st0" width="20" height="20"/>
                            <polygon class="st1" points="1.7,18.5 2.5,14.8 5.3,17.6 "/>
                            <g>
                                <path class="st1" d="M18.5,4.3l1-1c0.2-0.2,0.2-0.5,0-0.7l-2.1-2.1c-0.2-0.2-0.5-0.2-0.7,0l-1,1L18.5,4.3z"/>
                                <rect x="1.7" y="7.6" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -3.6929 10.2382)" class="st1" width="17.7" height="3.9"/>
                            </g>
                            </svg>
                          </span>
                      <!--  @click="selectKeyword(item.id)" -->
                  </div>
                  <div class="keywordbodyB">
                      <span>更新于{{item.updateTime}}</span>
                      <!-- {{item.updateTime}} -->
                  </div>
              </div>
          </div>

          <div class="pagebox">
           <div class="block">
                <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page.sync="currentPage3"
                :page-size="3"
                layout="total, prev, pager, next, jumper"
                :total= pagetotal>
                </el-pagination>
            </div>
         </div>

          <!-- v-html="updateLi.textareaText"  @click="exittemplateistok"  v-model="checked"-->

         <!-- <div slot="footer" class="dialog-footer">
            <el-button @click="SelectFormVisible = false">取 消</el-button>
            <el-button type="danger">确 定</el-button>
         </div> -->
      </el-dialog>

            <el-dialog title="编辑模板" :visible.sync="exitFormVisible2">
         <el-form>
           <div class="moudlename">
              <div>模板名称</div>
              <input type="text" class="moudleinput" placeholder="模板名称" v-model="defaultname2">
           </div>

            <div class="moudlecon">
               <div class="text1">关键词模板</div>
               <div class="text2">请输入主体（一行一个）</div>
               <textarea id="keytext" v-html="mStr2" @change="changeText"></textarea>
               <!-- <el-checkbox>设为默认模板</el-checkbox> v-html="mStr2" -->
            </div>
         </el-form>
          <!-- v-html="updateLi.textareaText"  @click="exittemplateistok"  v-model="checked"-->

         <div slot="footer" class="dialog-footer">
            <el-button @click="exitFormVisible2 = false">取 消</el-button>
             <!-- @click="updateKey2(updatekeyid)" -->
            <el-button type="danger" @click="updateKey2(updatekeyid)">保 存</el-button>
         </div>
      </el-dialog>


    </div>
</template>

<script>
// import { switch } from 'element-ui/lib/switch.js'
import {getModuleInsert2,getList,getTaskInser,getModule,getTempltateUpdateLis, getTempltateUpdateList,UpdataTemplate,ChangeUpdateModule} from '@/api'
// import moduleName from 'module';
export default {
    data () {
        return {
            subjectText: '',
            companyName: '',
            options: [
                        {
                        "id": 1,
                        "name": "保险"
                        },
                        {
                        "id": 2,
                        "name": "能源"
                        },
                        {
                        "id": 3,
                        "name": "地质"
                        }
                    ],
                value: '',
                open0: true,
                open1: false,
                open2: true,
                open3: true,
                pagenum: 1,
                currentPage3: 5,
                pagetotal: 1,
                open4: true,
                moduleList: [],
                SelectFormVisible: false,
                formLabelWidth: '120px',
                searchcon: '',
                morenradio: '1',
                allTemplates: [],
                itemIndex: 0,  // 这个是模板的id
                itemindexs: 0,
                exitFormVisible2: false,  // 编辑关键字模板
                defaultname2: '', // 编辑关键字默认名字
                mStr2: '',
                updatekeyid: 0,
                pageid: 0,
                mStr3: ''
            }
    },
    created () {
        this.initPlateList()
    },
    methods: {
        goback() {
             this.$router.go(-1)
        },
        searchBtn() {
            let obj = {
                id: this.pageid,
                pageNum: 1,
                templateName: this.searchcon
            }
            getModule(obj)
            .then(res => {
                console.log(res)
                this.pagetotal = res.data.templateTotal
                this.allTemplates = res.data.templates
                // console.log(this.allTemplates)
            })
        },
        changeRadio(tid) {
            let obj = {
                mid: this.pageid,
                tid: tid
            }
            ChangeUpdateModule(obj)
            .then(res => {
                if(res.statusCode == 200) {
                    this.$message({
                        message: res.statusMsg,
                        type: 'success'
                    });
                } else {
                     this.$message({
                        message: res.statusMsg,
                        type: 'error'
                    });
                }
                // console.log(res)
            })
        },
        handleSizeChange(val) {
        },
        handleCurrentChange(val) {
            this.pagenum = val
             let obj = {
                id: this.pageid,
                pageNum: this.pagenum,
                templateName: this.searchcon
            }
            getModule(obj)
            .then(res => {
                // console.log(res)
                this.pagetotal = res.data.templateTotal
                this.allTemplates = res.data.templates
                // console.log(this.allTemplates)
            })
        },
        
        // ckj 编辑面板按确定的时候的代码
        updateKey2(updatekeyid) {
            let aa = document.getElementById('keytext').value
            // console.log(aa)
         let keyContents = (aa.trim().split(/\n+/)).join('+')
         keyContents = keyContents.replace(/\&#10;/g, '+')
         if(keyContents.charAt(keyContents.length-1) == '+') {
             keyContents = keyContents.substr(0, keyContents.length - 1); 
         }
         let obj = {
            id: updatekeyid,
            name: this.defaultname2,
            keyContents: keyContents
         }
         console.log(obj)
         UpdataTemplate(obj)
         .then(res => {
            if(res.statusCode ===200) {
               this.$message({
                  message: res.statusMsg,
                  type: 'success'
               });
               this.exitFormVisible2 = false
            //    this.mStr2 = ""
            //    this.initPlateList()
            //   window.reload()
            // this.$router.go(0)
            } else {
               this.$message({
                  message: res.statusMsg,
                  type: 'success'
               });
            }
         })
        },
        changeText(e) {
         console.log(e)
         this.mStr2 = e.target.value
        //  console.log(this.mStr2)
      },
        // ckj 点击笔的时候。编辑
        selectKeyword(id) {
            // console.log(id)
            this.exitFormVisible2 = true
         getTempltateUpdateList(id) 
            .then(res => {
                // console.log(res)
               this.updatekeyid = res.data.id
               this.defaultname2 = res.data.name
               // console.log(this.defaultname2)
               let keywords2 = res.data.keywords;
               let mStr2 = ""
            //    console.log(keywords2)
                for(let i = 0; i < keywords2.length; i++ ) {
                  mStr2 += keywords2[i].content + '&#10;'
                }
                document.getElementById('keytext').innerHTML = mStr2

                mStr2 = ""
                for(let i = 0; i < keywords2.length; i++ ) {
                  mStr2 += keywords2[i].content + '\n'
                }
                document.getElementById('keytext').value = mStr2
                    // this.mStr2 = mStr2
                    // console.log(this.mStr2)
            })

        },
        // 点击更换模板  点击后更换muduleList里面的东西
        replaceTemplate(id) {
            // console.log(id)
            // console.log(this.itemIndex)
            let index = this.itemIndex
            let itemindexs = this.itemindexs
            getTempltateUpdateList(id)
           .then(res => { 
            //    console.log(res)
            // console.log(this.moduleList)
            // console.log(this.moduleList[index].templates[itemindexs])
            // console.log(this.moduleList[index].templates[itemindexs].id)  
            // console.log(res.data.id)
               this.moduleList[index].templates[itemindexs].name = res.data.name
               this.moduleList[index].templates[itemindexs].updateTime = res.data.updateTime
               this.moduleList[index].templates[itemindexs].id = res.data.id
            //    console.log(this.moduleList)
               this.SelectFormVisible = false
           })
        },
        selectOther(id, index, indexs) {
            this.pageid = id
            this.itemIndex = index
            this.itemindexs = indexs
            // console.log(this.itemindexs)
            this.SelectFormVisible = true
            let obj = {
                id: id,
                pageNum: this.pagenum,
                templateName: this.searchcon
            }
            getModule(obj)
            .then(res => {
                // console.log(res)
                this.pagetotal = res.data.templateTotal
                this.allTemplates = res.data.templates
                // console.log(this.allTemplates)
            })
        },
        topagenumbtn() {
         // console.log(this.pagenum)
         // console.log(this.pagetotal)
            if(this.pagenum>this.pagetotal) {
               this.pagenum = 1
                return false;
            }
            // this.initSearchList ()
        },
        nextpage() {
        //    console.log(this.pagenum)
        //    console.log(this.pagetotal)
            if(this.pagenum>=this.pagetotal) {
                return false;
            }
            this.pagenum = this.pagenum + 1
            // this.initSearchList ()
        },
        changeSwitch (index,type) {
            let list = this.moduleList
            this.moduleList = []
            if (type == true) {
                list[index].openvalue = false
            } 
            if (type == false) {
                list[index].openvalue = true
            }
            // list[index].openvalue = false
            this.moduleList = list
            // console.log(moduleList)
            // console.log(item.openvalue = false)
        },
        addNegativebtn() {
            let remids = ""
            let retids = ""

            for(let i=1;i<this.moduleList.length;i++) {
                if(this.moduleList[i].open == true) {
                     remids += this.moduleList[i].id +"+"
                }
                // remids += "mids=" + this.moduleList[i].id +"&"
            }
            remids = remids.substring(0, remids.length - 1);
            // console.log(remids)

            for(let i=1;i<this.moduleList.length;i++) {
                // console.log(this.moduleList[i].templates)
               for(let j=0; j<this.moduleList[i].templates.length;j++) {
                //    console.log(this.moduleList[i].templates[j].name)
                //    retids += "tids=" + this.moduleList[i].templates[j].id +"&"
                if(this.moduleList[i].open == true) {
                     retids += this.moduleList[i].templates[j].id +"+"
                }
               }
            }

             retids = retids.substring(0, retids.length - 1);
            //  console.log(retids)
            //  console.log(this.moduleList[0].id)

             let rehongtids = ""
             for(let i=0;i<this.moduleList[0].templates.length;i++) {
                //   rehongtids += "hongtids="+this.moduleList[0].templates[i].id+"&"
                rehongtids += this.moduleList[0].templates[i].id+"+"
             }
             rehongtids = rehongtids.substring(0, rehongtids.length - 1);
            //  console.log(rehongtids)

             let subjectText = this.subjectText
            //  console.log(this.subjectText)
            //  let subjectText = (this.subjectText.trim().split(/\n+/)).join('+')
             let subjectText1 = (this.subjectText.trim().split(/\n+/)).join('+')
            //  console.log(subjectText1)
            // ckj 宏观经济开关传数字

            let obj = null
             if(this.moduleList[0].open == false) {
                     obj = {
                        companyName: this.companyName,
                        entity: subjectText1,
                        mids: remids,
                        tids: retids,
                        industry: this.value
                        }
             } else {
                  obj = {
                    companyName: this.companyName,
                    entity: subjectText1,
                    mids: remids,
                    tids: retids,
                    hongmid: this.moduleList[0].id,
                    hongtids: rehongtids,
                    industry: this.value
                }
             }

            //  console.log(obj)
             
            if(obj.companyName == '') {
                this.$message({
                    title: '警告',
                    message: '请选择公司',
                    type: 'warning'
                });
                return false
            }

            //   || this.moduleList[4].open==true &&
            if(  this.moduleList[0].open==true && obj.industry == '') {
                this.$message({
                    title: '警告',
                    message: '请选择所属行业',
                    type: 'warning'
                });
                return false
            }

             if(  this.moduleList[3].open==true && obj.industry == '') {
                this.$message({
                    title: '警告',
                    message: '请选择所属行业',
                    type: 'warning'
                });
                return false
            }

             if(  this.moduleList[4].open==true && obj.industry == '') {
                this.$message({
                    title: '警告',
                    message: '请选择所属行业',
                    type: 'warning'
                });
                return false
            }

             if(this.moduleList[1].open==true && obj.entity == '') {
                this.$message({
                    title: '警告',
                    message: '请选择主体',
                    type: 'warning'
                });
                return false
            }

            if(this.moduleList[2].open ==true && obj.entity == '') {
                this.$message({
                    title: '警告',
                    message: '请选择主体',
                    type: 'warning'
                });
                return false
            }
            
                // console.log(obj)

            // ckj 添加五大模块任务
            getTaskInser(obj)
            .then(res => {
                // console.log(res)
                if(res.statusCode == 200) {
                    this.$router.push({path: '/finishFeature'})
                }
            })

        },

        initPlateList() {
            getModuleInsert2()
            .then(res =>  {
                this.moduleList = res.data
                // for(let i=0;i<this.moduleList.length;i++) {
                //      this.moduleList[i].openvalue = false
                // }
                // console.log(this.moduleList)
            })
            // ckj 获取行业信息
            getList()
            .then(res => {
               this.options = res.data
            })
        }
    }

}
</script>

<style lang="scss" scoped>
    .el-collapse-item__header {
        position: relative;
    }
    .selRight {
        // float: right;
        position: absolute;
        right: 40px;
    }
    .el-select {
        width: 265px;
    }
    .accounthead {
      background-color: #f9f6f9;
        position: relative;
        text-align: left;
        width: 100%;
        height: 70px;
        font-size: 22px;
        line-height: 86px;
        // border-bottom: 1px solid #ccc;
        img {
            margin-left: 20px;
        }
        span {
            position: absolute;
            bottom: -9px;
            left: 60px;
            // margin-bottom: 10px;
            // margin-left: 19px;
        }
    }

    .company1 {
        display: inline-block;
    }
    .company2 {
        display: inline-block;
        margin-left: 10px;
    }
    
    .newbody {
       background-color: #fff;
       width: 100%;
    //    padding-left: 69px;
       .newbodyhead {
           position: relative;
          text-align: left;
          font-size: 30px;
          height: 112px;
          line-height: 112px;
          span {
              position: absolute;
              left: -100px;
            //  margin-left: 69px;
          }
       }
    }

     .bigbox {
       background-color: #fff;
       padding-left: 161px;
        padding-right: 161px;
    }

    .company {
       text-align: left;
       span {
          font-size: 20px;
       }
       .companyname {
         font-family:"Microsoft YaHei";
          margin-bottom: 10px;
          text-indent: 10px;
          font-size: 16px;
          width: 300px;
          height: 35px;
          border:1px solid rgba(191,191,191,1);
       }
    }

    .subject {
       text-align: left;
       .subjecttitle {
          font-size: 20px;
          .subjecttitle2 {
              font-size: 13px;
          }
       }
       textarea {
          font-family:"Microsoft YaHei";
          font-size: 16px;
          height: 290px;
          width: 100%;
       }
    }

    .keyword {
       position: relative;
       width: 100%;
       font-size: 18px;
       box-sizing: border-box;
       .keyfont {
           font-size: 18px;
       }
       .keywordhead {
          text-align: left;
          .right {
             cursor: pointer;
             color: #B25262;
             font-size: 13px;
             float: right;
          }
       }
       .keywordbody {
          box-sizing: border-box;
          border-radius: 4px;
          border: 1px solid #c9c9c9;
          height: 128px;
          width: 100%;
          padding: 0 20px;
          .keywordbodyT {
             height: 50%;
            text-align: left;
            line-height: 60px;
            border-bottom: 1px solid #ccc;
            .penico {
               float: right;
               margin-top: 22px;
            }
            .key15 {
               color: #4F8AC1;
               font-size: 15px;
            }
          }
          .keywordbodyB {
             color: #7E7E7E;
             font-size: 15px;
             text-align: left;
          }
       }
    }

    .keywordTop {
       margin-top: 10px;
    }

    .foot {
        position: relative;
        width: 100%;
        height: 200px;
        // background-color: pink;
        .footBtn {
            margin-top: 90px;
            position: absolute;
            right: 0;
            .el-button {
                width: 116px;
                height: 45px;
            }
        }
    }

    .moudlename {
       text-align: left;
       >div {
          font-size: 20px;
       }
       .moudleinput {
          width: 256px;
          height: 35px;
          font-size: 18px;
       }
    }

    .moudlecon {
       text-align: left;
       .text1 {
          font-size: 20px;
          color: #5D5D5D;
       }
       .text2 {
          color: #666666;
          font-size: 13px;
       }
       textarea {
          width:100%;
          height:292px;
       }
    }


        .searchbox{
         height: 50px;
         background-color: #fff;
        position: relative;
        .searchInput {
            position: absolute;
            left: 0;
            // transform: translateX(-50%);
            margin: 0 auto;
            width: 327px;
        }
        .searchBtn {
           height: 100%;
           background-color: #f5f7fa;
            // background-color: #BFBFBF;
        }
    }

    .keyword {
    //    margin-top: 20px;
       position: relative;
       width: 100%;
       font-size: 18px;
       box-sizing: border-box;
       .keywordbody {
          box-sizing: border-box;
          border-radius: 4px;
          border: 1px solid #c9c9c9;
          height: 128px;
          width: 100%;
          padding: 0 20px;
          .keywordbodyT {
             height: 50%;
            text-align: left;
            line-height: 60px;
            border-bottom: 1px solid #ccc;
            .penico {
               float: right;
               margin-top: 22px;
            }
            .key15 {
               color: #4F8AC1;
               font-size: 15px;
            }
          }
          .keywordbodyB {
             color: #7E7E7E;
             font-size: 15px;
             text-align: left;
          }
       }
    }

    .pagebox {
        width: 100%;
        height: 48px;
        background-color: #fff;
    }
    .page {
        background: #fff;
        float: right;
        .pageInput {
            margin: 0 10px;
            height: 20px;
            width: 38px;
        } 
    }
        .angle {
        display: inline-block;
        transform:rotate(-90deg);
        cursor: pointer;
    }

</style>

